import React, { Component } from 'react'
import { Form, Upload, Button, message } from 'antd';

export default Form.create()
class ImgUpload extends Component {

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values);
            }
        })
    }
    // 上传之前做一些验证
    beforeUpload = e => {
        if (e.type != 'image / png') {
            message.error('格式不对')
            return false
        }
    }
    // 准备上传，上传中，上传后
    normFile = e => {
        if (e.file.type != 'image / png') return false //这里也做一个验证
        if (Array.isArray(e)) return e
        return e && e.fileList;
    }

    render() {
        const { getFieldDecorator } = this.props.form
        return (
            <div className=' page_imgUpload'>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Item label="Upload">
                        {getFieldDecorator({
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                        })(
                            <Upload
                                name="file" //这个name 字段是后台接口的一个参数名，必填
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                beforeUpload={this.beforeUpload}  //上传前的回调，用来处理用户格式不正确的逻辑
                            >
                                <Button>
                                    Click to upload
                </Button>
                            </Upload>,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            Submit
            </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}








